import { Meta } from '@storybook/addon-docs';
import icons from '~/assets/fonts/icons/selection.json';

<style>{`
.sb-icons {
  // display: flex;
}

.sb-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #777;
  margin: 5px;
  border-radius: 5px;
  width: 220px;
  height: 100px;
}

.sb-icon > i {
  margin-top: 10px;
  font-size: 32px;
  line-height: 32px;
  width: 32px;
  height: 32px;
}
`}</style>

<Meta title="Assets/Icons" />

# Icons

Icons are created using the standard HTML &lt;i&gt element with the class `icon` and the class name of the icon, as shown below.

e.g.

<pre>&lt;i class="icon icon-show" /&gt;</pre>

<br/><br/>
<div className="sb-icons">
{icons.icons.map((icon, index) => (
  <div className="sb-icon" key={index}>
    <div>{function(icon) { const name = icon.properties.name.split(','); return `icon-${name[0]}`}(icon)}</div>
    <i className={function(icon) { const name = icon.properties.name.split(','); return `icon icon-${name[0]}`; }(icon)} />
  </div>
))}
</div>